// 引入需要使用的样式
require("../css/course.less")
require("../fonts/iconfont.css")
document.ready(function () {
    // 判断是否登录
    window.utils.isLogin();
    //接收挂载在window上的底部tab栏
    window.utils.navTabs("sport");
    // 顶部导航
    window.utils.addTopNav('course');
    /* 获取dom */
    const newcourseImg = document.querySelector('#newcourseImg') // 最新课程图片
    const newcourseName = document.querySelector('#newcourseName') // 最新课程名称
    const newcourseDesc = document.querySelector('#newcourseDesc') // 最新课程描述
    const newcourseList = document.querySelector('#newcourseList') // 新课程
    const courseList = document.querySelector('#courseList') // 课程列表

    /* 获取自己的课程数据 */
    function getCourseList() {
        window.$http.get(`sports/courseList?id=${window.localStorage.getItem('userId')}`, function (res) {
            if (res.status === 0) {
                // 把最新课程取出来
                var newCourse = res.data.filter(function (v) {
                    return v.latest === 1
                })[0]

                // 渲染新课程
                newcourseImg.src = 'http://139.9.177.51:8099' + newCourse.imgurl;
                newcourseName.textContent = newCourse.name;
                newcourseDesc.textContent = newCourse.desc;

                newcourseList.dataset.courseid = newCourse.courseId; // 添加一个自定义属性 courseId

                // 把普通课程取出来
                var normalCourse = res.data.filter(function (v) {
                    return v.latest === 0
                })

                // 渲染课程列表
                let retHtml = ''; // 用于保存拼接结果
                for (let i = 0; i < normalCourse.length; i++) {
                    retHtml += `<div class="course-item mb16" data-courseid="${normalCourse[i].courseId}">
                        <img class="course-img" height="200" src="${ 'http://139.9.177.51:8099' + normalCourse[i].imgurl}" alt="最新课程">
                        <div class="text-container">
                            <h5>${normalCourse[i].name}</h5>
                            <p>${normalCourse[i].desc}</p>
                        </div>
                    </div>`;
                }
                // 把拼接结果放入页面
                courseList.innerHTML = retHtml
            }
        })
    }

    getCourseList()

    /* 点击最新课程 */
    newcourseList.addEventListener('click', function () {
        // 取出当前课程id
        let courseId = newcourseList.dataset.courseid
        window.location.href = `./courseDetail.html?courseId=${courseId}` // 跳转到课程详情页面
    })

    /* 给每一项课程绑定点击事件 */
    courseList.addEventListener('click', function (e) {
        let parentNode = e.target.parentNode; // 获取父节点
        let parentClassName = parentNode.className // 获取父级类名

        // 如果点击的是每一项
        if (parentClassName.includes('course-item') || parentClassName.includes('text-container')) {
            let courseId = ''
            // 先看看父有没有自定义属性课程id 如果有 取出来直接赋值 （判断点击的是图片）
            if (parentNode.dataset.courseid) {
                courseId = parentNode.dataset.courseid
            } else {
                // 否则 点击的是文字 需要找爷爷（往上找2层）
                courseId = parentNode.parentNode.dataset.courseid
            }
            window.location.href = `./courseDetail.html?courseId=${courseId}` // 跳转到课程详情页面
        }

    })
})